<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Cesium案例</title>
	</head>
	<script src="./code/list.js"></script>
	<script src="axios.min.js"></script>
	<link rel="stylesheet" href="./code/codemirror.min.css" />
	<link rel="stylesheet" href="./code/material-darker.min.css" />
	<script src="./code/codemirror.min.js"></script>
	<script src="./code/javascript.js"></script>
	<style>
		body {
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}

		* {
			margin: 0px;
			padding: 0px;
		}

		#list-box {
			position: fixed;
			left: 0px;
			top: 0px;
			height: 100vh;
			width: 200px;
			z-index: 9999;
			color: aliceblue;
			background-color: rgba(0, 0, 0, 1);
			transition: all 0.5S;
		}

		#list {
			position: relative;
			padding: 0px 5px;
			box-sizing: border-box;
			z-index: 9999;
			overflow: hidden;
			overflow-y: auto;
			height: 100%;
		}

		#list li {
			list-style: none;
			cursor: pointer;
			margin-top: 5px;
			padding: 2px 0px;
			z-index: 9999;
		}

		#show-hide {
			position: absolute;
			right: -42px;
			width: 42px;
			/* height: 180px; */
			background: rgba(0, 0, 0, 1.0);
			box-shadow: 0px 0px 5px rgba(245, 245, 245, 0.8);
			top: calc(50vh - 120px);
			padding: 5px;
			font-size: 18px;
			text-align: center;
			box-sizing: border-box;
			cursor: pointer;
		}

		#ifa {
			top: 10px;
			width: calc(100% - 20px);
			position: absolute;
			left: 10px;
			height: calc(100vh - 20px);
			background: rgba(0, 0, 0, 1);
			z-index: 2;
		}

		#showCode {
			position: absolute;
			right: 20px;
			bottom: 20px;
			padding: 5px 10px;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 4px;
			color: rgba(231, 231, 231, 1.0);
			z-index: 999;
			cursor: pointer;
			box-shadow: 0px 0px 3px rgba(245, 245, 245, 0.6);
		}

		#showCode:hover {
			color: red
		}

		#pop {
			position: fixed;
			width: 50vw;
			height: 80vh;
			right: 20px;
			bottom: 60px;
			z-index: 999;
			background: rgba(0, 0, 0, 1);
			box-shadow: 0px 0px 3px rgba(245, 245, 245, 0.6);
			display: none;
		}

		.CodeMirror {
			height: calc(100% - 42px);
		}

		.title {
			height: 42px;
			line-height: 42px;
			color: rgba(245, 245, 245, 0.8);
			user-select: none;
		}

		#title_text {
			text-align: center;
			padding: 0px 4rem;
			user-select: none;
		}

		#close {
			padding: 0px 10px;
			position: absolute;
			right: 5px;
			top: 0px;
			user-select: none;
		}

		#run {
			padding: 0px 10px;
			position: absolute;
			left: 5px;
			top: 0px;
			user-select: none;
		}

		#reset {
			padding: 0px 10px;
			position: absolute;
			right: 3rem;
			top: 0px;
			user-select: none;
		}

		#close:hover,
		#run:hover,
		#reset:hover {
			cursor: pointer;
			color: red;
		}
	</style>
	<body>
		<div id="showCode" onclick="showCode()">
			查看源码
		</div>

		<div id="list-box">
			<div id="show-hide" onclick="showList(this)">
				收起案例列表
			</div>
			<ul id="list">
				<li>
				</li>
			</ul>
		</div>

		<div id="ifa">
			<iframe id="ifaCtx" width="100%" height="100%" frameborder="0" name="context"></iframe>
		</div>

		<div id="pop">
			<div class="title v-drag">
				<div id="title_text" class="v-drag">
					源码：
				</div>
				<span id="reset" onclick="resetCode()">重置</span>
				<span id="close" onclick="hideCode()">收起</span>
				<span id="run" onclick="runCode()">运行</span>
			</div>
			<textarea id="myTextarea"></textarea>
		</div>


	</body>
</html>
<script>
	let ifaCtx = ""
	window.onload = function() {

		let _listDom = document.getElementById("list")
		let _outHtml = ""
		Object.keys(list).forEach(key => {
			let _item = list[key]
			_item.forEach(item => {
				_outHtml += `<li onclick="openUrl('${item.url}',this)">${item.name}<li>`
			})
		})
		_listDom.innerHTML = _outHtml

		const myTextarea = document.getElementById('myTextarea')
		window.editor = CodeMirror.fromTextArea(myTextarea, {
			lineNumbers: true,
			theme: "material-darker", // 使用黑暗主题
			mode: 'javascript' // 设置mode 对应的也要这之前引入相应的js
		});
		editor.setValue("代码还在加载中...请稍后")
		draw(document.getElementById("pop"))
	}

	function getAllSiblings(element) {
		var siblings = [];
		var parent = element.parentNode;
		var children = parent.childNodes;

		// 遍历父元素的子节点，将非元素节点排除
		for (var i = 0; i < children.length; i++) {
			if (children[i].nodeType === 1 && children[i] !== element) {
				siblings.push(children[i]);
			}
		}

		return siblings;
	}
	let _openURL = ""
	let _default = ""
	var _reload = true
	var openUrl = function(url, node) {

		_reload = true
		let _siblings = getAllSiblings(node)
		_siblings.forEach(item => {
			// item.style.color = "#000000"
			item.style.background = "#000000"
		})
		// node.style.color = "#000000"
		node.style.background = "rgba(0,96,255,0.8)"
		document.getElementById("pop").style.display = "none"
		_openURL = url
		document.title = _openURL.replace(".html", "") + "：Cesium案例"
		if (_openURL) {
			axios.get(_openURL).then(res => {
				_default = res.data
				document.getElementById("ifaCtx").srcdoc = _default
			})
		}

	}
	let _listShow=true
	var showList= function(e){
		_listShow=!_listShow
		e.innerText=_listShow?"收起案例列表":"展开案例列表"
		document.getElementById("list-box").style.left=_listShow?"0px":"-201px"
	}
	var runCode = function() {
		document.getElementById("ifaCtx").srcdoc = editor.getValue()
	}
	var resetCode = function() {
		editor.setValue(_default)
		runCode()
	}
	var hideCode = function() {
		document.getElementById("pop").style.display = "none"
		_reload = false
	}
	var showCode = function() {
		document.getElementById("title_text").innerText = "源码：" + _openURL
		document.getElementById("pop").style.display = "block"
		if (_reload) {
			editor.setValue(_default)
		}
	}


	var draw = function(a) {
		let isStart = false; // 是否已经开始拖拽
		let l, t; // 当前被拖动的距离
		let w; // 当前屏幕宽度
		let h; // 当前屏幕的高度 
		const dragElem = a;
		let firstTime = "",
			lastTime = ""; //记录鼠标按下松开时间

		dragElem.onmousedown = function(e) {

			if (e.target.className.indexOf("v-drag") == -1) {
				//需要拖拽的div需要绑定类名v-drag
				e.stopPropagation();
				return;
			}
			dragElem.setAttribute("data-flag", false); //防止拖动时触发点击事件
			firstTime = new Date().getTime();
			// a.style.minWidth = a.clientWidth + 'px';

			w = document.body.clientWidth; // 当前屏幕宽度
			h = document.body.clientHeight; // 当前屏幕的高度
			if (isStart) return; // 如果已经开始拖拽， 返回
			isStart = true; // 如果没有开始拖拽， 则可以拖拽
			const {
				clientX,
				clientY
			} = e;
			const x = clientX - a.offsetLeft;
			const y = clientY - a.offsetTop;
			document.onmousemove = function(e) {
				e.preventDefault();
				a.style.cursor = "move";
				l = e.clientX - x;
				t = e.clientY - y;
				if (l < 0 && t < 0) {
					a.style.left = 0 + "px";
					a.style.top = 0 + "px";
				} else if (l < 0 && t + a.clientHeight < h) {
					a.style.left = 0 + "px";
					a.style.top = t + "px";
				} else if (l < 0 && t + a.clientHeight >= h) {
					a.style.left = 0 + "px";
					a.style.top = h - a.clientHeight + "px";
				} else if (l + a.clientWidth > w && t < 0) {
					a.style.left = w - a.clientWidth + "px";
					a.style.top = 0 + "px";
				} else if (
					l + a.clientWidth < w &&
					t + a.clientHeight >= h
				) {
					a.style.left = l + "px";
					a.style.top = h - a.clientHeight + "px";
				} else if (l + a.clientWidth < w && t < 0) {
					a.style.left = l + "px";
					a.style.top = 0 + "px";
				} else if (
					l + a.clientWidth > w &&
					t + a.clientHeight < h
				) {
					a.style.left = w - a.clientWidth + "px";
					a.style.top = t + "px";
				} else if (
					l + a.clientWidth > w &&
					t + a.clientHeight >= h
				) {
					a.style.left = w - a.clientWidth + "px";
					a.style.top = h - a.clientHeight + "px";
				} else {
					a.style.left = l + "px";
					a.style.top = t + "px";
				}
			};

			document.onmouseup = function(e) {
				document.onmousedown = null;
				document.onmousemove = null;
				isStart = false;
				a.style.cursor = "default";
				// onmouseup 时的时间，并计算差值
				lastTime = new Date().getTime();
				if (lastTime - firstTime < 200) {
					dragElem.setAttribute("data-flag", true);
				}
			};
		};
	}
</script>